<template>
  <div class="import_detail">
    <one-title title="导入详情" @refreshData="refresh">
      <div class="mes_btn">
        <el-button type="success" :disabled="isLoading"  @click="saveData">保存</el-button>
      </div>
    </one-title>
    <div class="import_tabs">
      <el-tabs type="border-card" v-loading="isLoading">
        <el-tab-pane label="工单">
          <div class="table_container tabs_table" v-if="Object.keys(importData).length > 0">
            <el-table
              :data="importData.workorderSheet"
              border
              height="100%"
              style="max-width: 100%">
              <mes-col-comp
                :key="column.prop"
                v-for="column in workOrderColumn"
                :column="column"></mes-col-comp>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="工艺表">
          <div class="table_container tabs_table">
            <el-table
              :data="importData.techProcSheet"
              border
              height="100%"
              style="max-width: 100%">
              <mes-col-comp
                :key="column.prop"
                v-for="column in processColumn"
                :column="column"></mes-col-comp>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="工序表">
          <div class="table_container tabs_table">
            <el-table
              :data="importData.workstageSheet"
              border
              height="100%"
              style="max-width: 100%">
              <mes-col-comp
                :key="column.prop"
                v-for="column in workStageColumn"
                :column="column"></mes-col-comp>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="工序上料表">
          <div class="table_container tabs_table">
            <el-table
              :data="importData.materialSheet"
              border
              height="100%"
              style="width: 100%">
              <mes-col-comp
                :key="column.prop"
                v-for="column in materielColumn"
                :column="column"></mes-col-comp>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="工序资源表">
          <div class="table_container tabs_table">
            <el-table
              :data="importData.resourceSheet"
              border
              height="100%"
              style="max-width: 100%">
              <mes-col-comp
                :key="column.prop"
                v-for="column in resourceColumn"
                :column="column"></mes-col-comp>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// 工单表列配置
import workOrderColumn from './components/workOrderColumn'
// 工艺表列配置
import processColumn from './components/processColumn'
// 工序表列配置
import workStageColumn from './components/workStageColumn'
// 上料表列配置
import materielColumn from './components/materielColumn'
// 资源表列配置
import resourceColumn from './components/resourceColumn'

export default {
  name: 'importDetail',
  data() {
    return {
      workOrderColumn: workOrderColumn, // 工单表列配置
      processColumn: processColumn, // 工艺表列配置
      workStageColumn: workStageColumn, // 工序表列配置
      materielColumn: materielColumn, // 上料表列配置
      resourceColumn: resourceColumn, // 资源表列配置
      isLoading: true, // 加载中
      source: null// axios token
    }
  },
  computed: {
    // 导入的数据
    importData() {
      return this.$store.state.workListReceive.importData
    }
  },
  mounted() {
    this.source = this.$axios.CancelToken.source()
    this.init()
  },
  methods: {
    // 刷新
    refresh() {
      this.init()
    },
    // 初始化
    init() {
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/workorder/workorderExcel/retrieve',
        data: {
          path: this.$route.params.id,
          fileName: this.$route.query.fileName
        },
        module: 'workListReceive',
        state: 'importData',
        cancelToken: this.source.token
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 保存
    saveData() {
      // 如果不是5张表 或者 已点过保存则退出
      if (Object.keys(this.importData).length !== 5 || this.saveState === true) return
      this.$store.commit('SetSaveState', true)
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/workorder/workorderExcel/save',
        data: {
          path: this.$route.params.id,
          fileName: this.$route.query.fileName,
          secretLevel: this.$route.query.fileGrade,
        },
        noCommit: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '保存成功',
          duration: 1500,
          center: true,
          onClose: () => {
            this.$store.dispatch('delCurrentViews', this.$route).then(() => {
              this.$router.push('/workListReceive')
              this.$store.commit('SetRefresh', true)
            })
          }
        })
      }).finally(() => {
        this.$store.commit('SetSaveState', false)
      })
    }
  }
}
</script>

<style scoped lang="less">
  .import_detail{
    height: 100%;
    .import_tabs{
      padding: 20px 20px;
      height: calc(100% - 56px);
      box-sizing: border-box;
    }
    .el-tabs{
      height: 100%;
    }
    .el-tab-pane{
      height: 100%;
    }
    .tabs_table{
      height: 100%;
      padding: 0 5px;
    }
  }
</style>
<style lang="less">
  .import_detail{
    .el-tabs__content{
      height: calc(100% - 40px);
      box-sizing: border-box;
    }
  }
</style>
